<template>
  <view class="app bg-white">
    <!-- 轮播图 -->
    <view class="m-3" v-if="carouselShow">
      <u-swiper
        :list="carousels"
        :autoplay="true"
        :height="300"
        :interval="5000"
        border-radius="20"
      ></u-swiper>
    </view>

    <view>
      <!-- 分类 -->
      <z-tabs
        ref="tabRef"
        :list="categoryData"
        :current="activeIdx"
        :active-style="{ fontSize: '32rpx' }"
        :inactive-style="{ fontSize: '32rpx' }"
        name-key="name"
        value-key="id"
        :scroll-count="1"
        :bar-width="55"
        :bar-height="5"
        :bottom-space="0"
        :active-color="config.theme.color"
        @change="changeTab"
      ></z-tabs>

      <!-- 数据 -->
      <view class="mt-20rpx">
        <z-paging
          ref="paging"
          v-model="collegeList"
          :default-page-size="limit"
          :use-page-scroll="true"
          :to-bottom-loading-more-enabled="true"
          :auto="false"
          :fixed="false"
          :min-delay="800"
          :refresher-enabled="false"
          :show-loading-more-no-more-view="false"
          :auto-hide-loading-after-first-loaded="false"
          @query="getData"
        >
          <view class="data-box" v-for="(item, index) in collegeList" :key="index" @click="goto(index)">
            <view class="content-left">
              <text class="content-title">{{ item.title }}</text>
              <text class="content-describe ellipsis-2">{{ item.subtitle }}</text>
              <text class="watch-num">{{ item.pv }}人观看</text>
            </view>
            <view class="content-right">
              <image
                class="cover"
                mode="widthFix"
                :src="`${item.cover}?imageView2/0/w/300/h/300`"
                lazy-load
                :lazy-load-margin="0"
                v-if="item.cover"
              />
            </view>
          </view>
          <template #loading>
            <view class="loading">
              <mt-logo-loading :size="88"></mt-logo-loading>
            </view>
          </template>
        </z-paging>
      </view>

      <!-- <tm-modal
        color="white"
        okColor="red"
        cancelColor="red"
        okLinear="left"
        splitBtn
        title="密码"
        :height="300"
        v-model:show="showWin"
        :beforeClose="verifyPassword"
        @cancel="verifyCancel"
      >
        <input
          type="password"
          confirm-type="done"
          v-model="password"
          @confirm="verifyPassword"
          :cursor-spacing="80"
          class="password-input"
          placeholder="请输入密码"
        />
      </tm-modal> -->
    </view>
  </view>
</template>

<script lang="ts" setup>
  import MtLogoLoading from '@/components/mt-loading/mt-logo-loading.vue';
  import { ref } from 'vue';
  import { getCarousel } from '@/api/page/carousel';
  import {
    getCollegeCategory as getCategoryDataApi,
    getCollege as getDataApi,
    setCollegeWatch,
    checkCollegePassword,
  } from '@/api/college/index';
  import { report } from '@/utils/exception';
  import { onReachBottom } from '@dcloudio/uni-app';
  import { config } from '@/config/env';
  import type { CollegeCategory, CollegeItem } from '@/types/college';

  const carousels = ref([]);
  const carouselShow = ref<boolean>(false);
  const activeIdx = ref<number>(0);
  const categoryData = ref<CollegeCategory[]>([]);
  const collegeList = ref<CollegeItem[]>([]);
  const limit = 10;
  const paging = ref();
  const showWin = ref(false);
  const password = ref<string>('');
  const checkIdx = ref<number>(-1);

  getCarousel(1)
    .then((res) => {
      carousels.value = res.data.imgs.split(',');
      carouselShow.value = res.data.imgs != '' && res.data.status == 1;
    })
    .catch((err) => {
      report(err);
    });

  const getData = (pageNo: number, pageSize: number) => {
    getDataApi(pageNo, pageSize, categoryData.value[activeIdx.value].id)
      .then((res) => {
        paging.value.complete(res.data.list);
      })
      .catch((err) => {
        report(err);
        paging.value.complete(false);
      });
  };

  const getCategoryData = () => {
    getCategoryDataApi()
      .then((res) => {
        categoryData.value = res.data.list;
        if (categoryData.value.length > 0) {
          paging.value.reload();
        }
      })
      .catch((err) => {
        report(err);
        paging.value.complete(false);
      });
  };
  getCategoryData();

  onReachBottom(() => {
    paging.value.doLoadMore();
  });

  const changeTab = (index: number) => {
    activeIdx.value = index;
    paging.value.reload();
  };

  // 跳转
  const goto = (index: number) => {
    if (collegeList.value[index].has_password == 0) {
      gotoDetail(collegeList.value[index].id, index);
    } else {
      checkIdx.value = index;
      showWin.value = true;
    }
  };

  // 跳转到
  const gotoDetail = (id: number, index: number) => {
    setCollegeWatch(id)
      .then((res) => {
        collegeList.value[index].pv = res.data.pv;
        uni.navigateTo({ url: `/pages/college/detail?id=${id}` });
      })
      .catch((err) => {
        console.log(err);
      });
  };

  // 验证密码
  const verifyPassword = () => {
    let id = collegeList.value[checkIdx.value].id;
    let index = checkIdx.value;

    return new Promise((res) => {
      setTimeout(() => {
        checkCollegePassword(id, password.value)
          .then((result) => {
            checkIdx.value = -1;
            password.value = '';
            res(true);
            gotoDetail(id, index);
          })
          .catch((err) => {
            res(false);
            report(err);
          });
      }, 500);
    });
  };

  const verifyCancel = () => {
    checkIdx.value = -1;
    password.value = '';
  };
</script>

<style lang="scss" scoped>
  .data-box {
    display: flex;
    padding: 30rpx 27rpx;
    &:not(:last-child) {
      border-bottom: 1px solid #d0d0d0;
    }

    .content-left {
      display: flex;
      flex-direction: column;
      flex: 2;

      .content-title {
        font-weight: 600;
        font-size: 33rpx;
      }

      .content-describe {
        padding-top: 10rpx;
        font-size: 27rpx;
        color: #969696;
      }

      .watch-num {
        padding-top: 20rpx;
        font-size: 25rpx;
        color: #969696;
      }
    }

    .content-right {
      flex: 1;
      height: 220rpx;
      padding-left: 30rpx;
      .cover {
        width: 240rpx;
      }
    }
  }

  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 800rpx;
  }

  .password-input {
    background: #f3f3f3;
    border-radius: 10rpx;
    padding: 0rpx 15rpx;
    height: 58rpx;
    font-size: 28rpx;
  }
</style>
